<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商品卡片</title>
    <!-- content: 245px, border: 2px, padding: 3px -->
    <!-- 卡片宽度255px，高度375px -->
    <!-- 图片大小245px -->
    <!--
    <style>
      body,
      h3 {
        margin: 0;
        padding: 0;
      }
      a {
        text-decoration: none;
        color: #000;
      }
      div img {
        width: 245px;
        height: 245px;
      }
      /* 1. 第一种方式 */
      /* .goods {
        width: 245px;
        padding: 3px 3px 0px;
        height: 375px;
        border: 2px solid #ff4a59;
      } */

      /* 2. 第二种方式 */
      /* .goods {
        border: 2px solid #ff4a59;
        width: 251px;
        height: 375px;
      }
      div img {
        * img不是块级元素，需要转为块级元素 *
        display: block;
        * 利用margin居中 *
        margin: 0 auto;
      } */

      /* 3. 第三种方式 */
      .goods {
        border: 2px solid #ff4a59;
        width: 251px;
        height: 375px;
        text-align: center;
      }
      .goods img {
        width: 245px;
        height: 245px;
      }

      /* 前面的问题已经完成, 接下来要看，商品的标题要和图片对齐，所以用padding */
      /* 通过检查元素，发现img的display为inline，改成盒子模型可以去掉额外的控件占用 */
    </style>
    -->
    <!--最终效果用paddign，因为这样可以让文字与图片对齐-->
    <!--涉及到文字的地方一般要用line-height-->
    <style>
      body,
      p,
      h3 {
        margin: 0;
        padding: 0;
      }
      a {
        color: #000;
        text-decoration: none;
      }
      .goods {
        width: 245px;
        height: 375px;
        padding: 0px 3px 0px;
        border: 2px solid #666;
      }
      .goods img {
        display: block; /* 消除额外占据空间 */
        width: 245px;
        height: 245px;
        margin-top: 3px;
      }
      .goods .title {
        margin-top: 1px;
        color: #666;
        font-size: 18px;
        /* line-height: 1; */
        line-height: 24px;
      }
      .goods .price {
        font-size: 24px;
        margin-top: 1px;
        color: #e12543;
      }
      .goods i {
        font-size: 18px;
        color: #e12543;
        font-style: normal;
        font-weight: bold;
      }
      .goods .price span {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div class="goods">
      <a href="www.baidu.com">
        <img src="./imags/01.jpg" alt="" />
        <h3 class="title">
          这是一段文字描述，这是一段文字描述，这是一段文字描述，这是一段文字描述，这是一段文字描述
        </h3>
        <p class="price"><i>￥</i>999.<span>00</span></p>
      </a>
    </div>
  </body>
</html>
